<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        table
        {
            width: 100px;
            height: 60px;
            border-collapse:collapse;
        }

        table, td, th
        {
            border:1px solid;
        }

    </style>

</head>
<body>
<table id="list"></table>
</body>
<script>
    var employees=[
        {
            id:1,
            name:"a",
            gender:"female",
            age:23

        },
        {
            id:2,
            name:"b",
            gender:"male",
            age:25

        },
        {
            id:3,
            name:"c",
            gender:"male",
            age:26

        }
    ];
    window.onload=function () {
        initTable();

    }
    function initTable() {
        var table2=document.getElementById('list');
        for (var key in employees){
            var employee=employees[key]
            var tRow=document.createElement('tr');
            for (var key2 in employee){
                if(key2!="id"){
                    var tData=document.createElement("td")
                    tData.innerText=employee[key2];
                    tRow.appendChild(tData)
                }
            }
            var tdForCommand=document.createElement("td");
            var btnRemove=document.createElement("button");
            btnRemove.innerText="删除";
            btnRemove.onclick=function () {
                var currentRow=this.parentElement.parentElement;
                table2.removeChild(currentRow);

            }
            tdForCommand.appendChild(btnRemove);
            tRow.appendChild(tdForCommand);
            table2.appendChild(tRow)
        }

    }
</script>
</html>